<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>日记管理</title>
        <!--<base th:href="${#request.getContextPath()}+'/'">-->
        <base th:href="@{/}">
        <!--bootstrap.min.css-->
        <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
        <script th:src="@{/bootstrap/js/jquery.js}"></script>
        <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
        <script th:src="@{/bootstrap/js/extendPagination.js}"></script>
        <script th:src="@{/bootstrap/js/layopen.js}"></script>
        <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}">
        <style>
            html, body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                overflow: hidden;
            }

            #callBackPagination {
                width: 100%;
                height: 100%;
            }

            #callBackPagination #mainContent {
                width: calc(100% - 40px);
                height: calc(100% - 80px);
            }
        </style>
    </head>
    <body>
        <div id="callBackPagination" class="piece">
            <div id="mainContent" style="margin: 0 20px;overflow-y: auto;"></div>
            <div id="callBackPager" style="margin: 0 20px"></div>
        </div>
    </body>
    <script th:src="@{/bootstrap/js/JSONUtil.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
    <script type="text/javascript">
        // 初始化参数
        var CACHE = [];
        let totalCount = 252, showCount = 1, limit = 10;

        /**
         * 分页回调
         */
        loadInitTable(showCount, limit);

        /**
         * 建表(初始化数据)
         * @param data
         */
        function createTable(data) {
            let html = [];
            html.push(' <table class="table table-hover piece" style="margin-left: 0;">');
            // html.push(' <caption style="text-align: center;">您管理的日记</caption>');
            html.push(' <thead><tr><th>标题</th><th>标签</th><th>创建时间</th><th>操作</th></tr></thead><tbody>');
            if (data.length > 0) {
                for (let i = 0; i < data.length; i++) {
                    html.push('<tr><td>' + data[i].title + '</td>');
                    html.push('<td style="max-width: 520px;">' + createTag(data[i].tagList) + '</td>');
                    html.push('<td>' + data[i].createTime.replace(/T/, ' ') + '</td>');
                    html.push('<td>' + createToolbar(data[i]) + '</td>');
                    html.push('</tr>');
                    data[i]['dataIndex'] = i;
                }
            }
            html.push('</tbody></table>');
            var mainObj = $('#mainContent');
            mainObj.empty();
            mainObj.html(html.join(''));
        }

        /**
         * 工具栏
         */
        function createToolbar(data) {
            return '<span onclick="editArticle(' + data.articleKey + ')" style="padding: 3px 8px;background: #1E9FFF;color: #FFF;cursor:pointer;' +
                'border-radius: 2px;margin: 5px 5px 5px 0;display: block;float: left;">编辑</span>' +
                '<span onclick="delArticle(' + data.articleKey + ')" style="padding: 3px 8px;background: #FFB800;color: #FFF;cursor:pointer;' +
                'border-radius: 2px;margin: 5px 5px 5px 0;display: block;float: left;">删除</span>';
        }

        /**
         * 编辑
         */
        function editArticle(key) {
            let row = getRowByKey(key);
            if (row !== null) {
                let json = {title: "编辑日记", x: '1170px', y: '650px', url: 'menu/write_diary'};
                layopen(json, "init", row);
            }
        }

        /**
         * 成功回调
         */
        function editSuccessCallback(data) {
            let row = getRowByKey(data.articleKey);
            updateRow(row, data);
        }

        /**
         * 删除文章
         */
        function delArticle(key) {
            layer.confirm('您是是否需要删除此记录？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                let row = getRowByKey(key);
                let url = 'article/delArticle';
                ajaxSyncPost(url, {articleKey: row.articleKey}, function () {
                    layer.load(1);
                }, function (result) {
                    layer.closeAll("loading");
                    if (result.code === 200) {
                        let dataIndex = row['dataIndex'];
                        removeCacheByKey(dataIndex);
                        $("#mainContent .table tbody tr").eq(dataIndex).remove();
                        SuccessAlert('删除成功');
                    } else {
                        WarnAlert('请求数据失败, 请稍后重试');
                    }
                }, function () {
                    layer.closeAll("loading");
                    ErrorAlert('后台请求出错, 请稍后重试');
                });
            }, function () {

            });
        }


        /**
         * 创建标签Dom
         */
        function createTag(tags) {
            let html = '';
            if (tags && tags.length > 0) {
                for (let i = 0; i < tags.length; i++) {
                    let v = tags[i];
                    html += '<span style="font-size: .8rem;line-height: 15px;padding: 3px 5px;' +
                        'color: #888;border: 1px solid #888;border-radius: 2px;margin: 5px 5px 5px 0;' +
                        'display: block;float: left;">' +
                        '<i class="menu-item-icon fa fa-fw fa-tags" style="margin-right: 5px;"></i>' + v.name + '</span>';
                }
            }
            return html;
        }

        /**
         * 加载表格
         * @param curr
         * @param limit
         * @param totalCount
         */
        function loadTable(curr, limit, totalCount) {
            let url = 'article/pageGetArticle';
            ajaxSyncPost(url, {pageIndex: curr, pageSize: limit}, function () {
                layer.load(1);
            }, function (result) {
                layer.closeAll("loading");
                if (result.code === 200) {
                    let data = result.data;
                    totalCount = result.count;
                    createTable(data);
                } else {
                    WarnAlert('请求数据失败, 请稍后重试');
                }
            }, function () {
                layer.closeAll("loading");
                ErrorAlert('后台请求出错, 请稍后重试');
            });
        }

        /**
         * 初始化加载表格
         * @param curr
         * @param limit
         */
        function loadInitTable(curr, limit) {
            let url = 'article/pageGetArticle';
            ajaxSyncPost(url, {pageIndex: curr, pageSize: limit}, function () {
                layer.load(1);
            }, function (result) {
                layer.closeAll("loading");
                if (result.code === 200) {
                    let data = result.data;
                    CACHE = data;
                    totalCount = result.count;
                    createTable(data);
                    $('#callBackPager').extendPagination({
                        totalCount: totalCount,
                        showCount: showCount,
                        limit: limit,
                        callback: function (curr, limit, totalCount) {
                            loadTable(curr, limit, totalCount);
                        }
                    });
                } else {
                    WarnAlert('请求数据失败, 请稍后重试');
                }
            }, function () {
                layer.closeAll("loading");
                ErrorAlert('后台请求出错, 请稍后重试');
            });
        }

        /**
         * 获取当行数据
         * @param key
         * @returns {*}
         */
        function getRowByKey(key) {
            for (let i = 0; i < CACHE.length; i++) {
                let v = CACHE[i];
                if ((v.articleKey + '') === (key + '')) {
                    return v;
                }
            }
            return null;
        }

        /**
         * 更新行数据
         */
        function updateRow(row, data) {
            let index = row['dataIndex'];
            updateRowCache(index, data);
            updateRowDom(index, data);
        }

        /**
         * 更新行Dom
         */
        function updateRowDom(dataIndex, data) {
            let $tr = $("#mainContent .table tbody tr").eq(dataIndex);
            if ($tr) {
                $tr.find("td").eq(0).text(data.title);
                let tags = createTag(data.tagList);
                $tr.find("td").eq(1).html(tags);
                $tr.find("td").eq(2).text(data.createTime);
                let opt = createToolbar(data);
                $tr.find("td").eq(3).html(opt);
            }
        }

        /**
         * 获取数据在缓存中的索引并替换他
         * @param dataIndex
         * @returns {null}
         */
        function updateRowCache(dataIndex, data) {
            data['dataIndex'] = dataIndex;
            removeCacheByKey(dataIndex);
            CACHE.push(data);
        }

        /**
         * 通过ID删除缓存数据
         * @param key
         */
        function removeCacheByKey(dataIndex) {
            for (let i = 0; i < CACHE.length; i++) {
                let v = CACHE[i];
                if (v.dataIndex === dataIndex) {
                    CACHE.splice(i, 1);
                    break;
                }
            }
        }

    </script>
</html>